<template>
	<div id='system' v-loading="loading">
		<div class="content-top">
			<span class="h1">基础管理</span>
			<span class="h2">客户管理</span>
		</div>
		<div class="top-btn clearfix">
			<div class="left-content">
				<!--<span class="tip">商家列表</span>-->
			</div>
			<div style="float:left">
				<el-button type="primary" @click="addUser()">添加用户</el-button>
			</div>
			<div class="right-search1">
				<el-input v-model="input" placeholder="输入关键词…"></el-input>
				<el-button  type="primary" @click="searcj()" style="margin-left: 10px;">查看</el-button>
				<el-button type="primary" @click="excel()">导出excel</el-button>
			</div>
		</div>
		<el-table
		    :data="tableData"
		    style="width: 100%">
		    <el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="CNName" label="姓名">
			</el-table-column>
			<el-table-column prop="Gender" label="性别">
			</el-table-column>
			<el-table-column prop="CardID" label="身份证号" width="200">
			</el-table-column>
			<el-table-column prop="Tel" label="电话">
			</el-table-column>
			<el-table-column prop="Age" label="年龄">
			</el-table-column>
			<el-table-column prop="TelYears" label="电话年限">
			</el-table-column>
			<!--<el-table-column prop="Address" label="地址">
			</el-table-column>-->
			<!--<el-table-column prop="QQ" label="QQ">
			</el-table-column>-->
			<el-table-column prop="WX" label="微信">
			</el-table-column>
			<!--<el-table-column prop="EmergencyName" label="联系人">
			</el-table-column>
			<el-table-column prop="EmergencyPhone" label="联系人电话">
			</el-table-column>
			<el-table-column prop="EmergencyRelation" label="联系人关系">
			</el-table-column>-->
			<!--<el-table-column prop="WX" label="微信">
			</el-table-column>-->
			 <!--<el-table-column label="查看">
		      <template slot-scope="scope">
					<el-button type="success" size="small" @click="modiy(scope.row.ID)">查看</el-button>
				</template>
			</el-table-column> -->
			<el-table-column label="查看">
				<template slot-scope="scope">
					<router-link v-if='scope.row.ID' v-bind="{to:'/creditInfo/'+(scope.row.ID)}"><el-button size="mini">风控报告  </el-button></router-link>
					<span v-else></span>
				</template>
			</el-table-column>
		    <el-table-column label="操作">
		      <template slot-scope="scope">
					<el-button type="danger" size="small" @click="del(scope.row.ID)">删除</el-button>
			</template>
		    </el-table-column>
		  </el-table>
		  <div class="pages">
				<el-pagination small :current-page="index" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background prev-text='上一页' next-text='下一页'>
				</el-pagination>
			</div>
		  <!--添加用户弹框-->
		<el-dialog title="用户管理" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
			<div>
				<el-form :label-position="labelPosition" label-width="130px" :model="formLabelAlign">
				  <el-form-item label="姓名:">
				    <el-input v-model="formLabelAlign.name"></el-input>
				  </el-form-item>
				  <el-form-item label="性别:">
				    	<el-radio v-model="formLabelAlign.sex" label="男" >男</el-radio>
						<el-radio v-model="formLabelAlign.sex" label="女" >女</el-radio>
				  </el-form-item>
				  <el-form-item label="金额:">
				    <el-input v-model="formLabelAlign.money" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="身份证号:">
				    <el-input v-model="formLabelAlign.card"></el-input>
				  </el-form-item>
				  <el-form-item label="年龄:">
				    <el-input v-model="formLabelAlign.age" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="电话:">
				    <el-input v-model="formLabelAlign.tel" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="电话实名年限:">
				    <el-input v-model="formLabelAlign.years" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="居住地址:">
				    <el-input v-model="formLabelAlign.add"></el-input>
				  </el-form-item>
				  <!--<el-form-item label="QQ号:">
				    <el-input v-model="formLabelAlign.qq" type='number'></el-input>
				  </el-form-item>-->
				  <el-form-item label="微信号:">
				    <el-input v-model="formLabelAlign.wx"></el-input>
				  </el-form-item>
				  <el-form-item label="芝麻分:">
				    <el-input v-model="formLabelAlign.zmf" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人:">
				    <el-input v-model="formLabelAlign.jj1"></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系:">
				    <el-input v-model="formLabelAlign.jj2"></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话:">
				    <el-input v-model="formLabelAlign.bz" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人1:">
				    <el-input v-model="formLabelAlign.jj11"></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系1:">
				    <el-input v-model="formLabelAlign.jj21"></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话1:">
				    <el-input v-model="formLabelAlign.bz1" type='number'></el-input>
				  </el-form-item>
				  <el-form-item label="手持身份证:">
				    <el-upload class="avatar-uploader" :action="host" :show-file-list="false" :on-success="cardHoldSuccess" :on-error="onError" :before-upload="beforeAvatarUpload">
		                <img v-if="cardHold" :src="cardHold" class="avatar">
		                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		            </el-upload>
				  </el-form-item>
				  <el-form-item label="身份证正面:">
				    <el-upload class="avatar-uploader" :action="host" :show-file-list="false" :on-success="cardPosSuccess" :on-error="onError" :before-upload="beforeAvatarUpload">
		                <img v-if="cardPos" :src="cardPos" class="avatar">
		                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		            </el-upload>

				  </el-form-item>
				  <el-form-item label="身份证反面:">
				    <el-upload class="avatar-uploader" :action="host" :show-file-list="false" :on-success="cardBackSuccess" :on-error="onError" :before-upload="beforeAvatarUpload">
		                <img v-if="cardBack" :src="cardBack" class="avatar">
		                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		            </el-upload>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="newUse()">确 定</el-button>
			</span>
		</el-dialog>
		<!--修改用户-->
		<!-- <el-dialog title="用户信息" :visible.sync="mark" width="760px" :before-close="handleClose" class='member_box'>
			<div>
				<el-form :label-position="labelPosition" label-width="130px" :model="formLabelAlign">
					<div class="clearfix thumbnail">
						<div class='divleft'><img :src="Host+sczSfz"/></div>
						<div class='divrig'>
							<el-form-item label="姓名:" label-width="60px">
							    <el-input v-model="formLabelAlign.name" disabled></el-input>
							</el-form-item>
							<el-form-item label="性别:" label-width="60px">
						    	<el-radio v-model="formLabelAlign.sex" label="男" >男</el-radio>
								<el-radio v-model="formLabelAlign.sex" label="女" >女</el-radio>
						    </el-form-item>
						    <el-form-item label="芝麻分:" label-width="60px">
							    <el-input v-model="formLabelAlign.zmf" type='number' disabled></el-input>
							</el-form-item>
							<el-form-item label="微信号:" label-width="60px">
							    <el-input v-model="formLabelAlign.wx" disabled></el-input>
							  </el-form-item>
						</div>
					</div>
				  <div class="sfz-box clearfix">
				  	<img :src="Host+zmzSfz"/>
				  	<img :src="Host+fmzSfz"/>
				  </div>
				  <el-form-item label="身份证号:">
				    <el-input v-model="formLabelAlign.card" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="年龄:">
				    <el-input v-model="formLabelAlign.age" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="电话:">
				    <el-input v-model="formLabelAlign.tel" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="电话实名年限:">
				    <el-input v-model="formLabelAlign.years" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="居住地址:">
				    <el-input v-model="formLabelAlign.add" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人:">
				    <el-input v-model="formLabelAlign.jj1" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系:">
				    <el-input v-model="formLabelAlign.jj2" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话:">
				    <el-input v-model="formLabelAlign.bz" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人1:">
				    <el-input v-model="formLabelAlign.jj11" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系1:">
				    <el-input v-model="formLabelAlign.jj21" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话1:">
				    <el-input v-model="formLabelAlign.bz1" type='number' disabled></el-input>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="Close()">关闭</el-button>
			</span>
		</el-dialog> -->
	</div>
</template>

<script>
import api from "../../../api/api";
export default {
  name: "customer",
  data() {
    return {
      zmzSfz: "", //正面照
      fmzSfz: "", //反面照
      sczSfz: "", //手持照
      cardHold: "", //手持
      cardPos: "", //正面
      cardBack: "", //背面
      basic: "", //基本信息
      cardHoldUrl: "", //身份证手持
      cardPosUrl: "", //身份证正面
      cardBackUrl: "", //身份证反面
      emergencyName1: "", //紧急联系人
      emergencyRelation1: "", //紧急联系人关系,取值范围father(父亲)，mother(母亲)
      emergencyPhone1: "", //紧急联系人手机号,
      host: "",
      index: 1,
      total: 1,
      input: "",
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        sex: "男",
        money: "",
        card: "",
        age: "",
        tel: "",
        years: "",
        city: "",
        add: "",
        qq: "",
        wx: "",
        zmf: "",
        jj1: "",
        jj2: "",
        bz: "",
        jj11: "",
        jj21: "",
        bz1: ""
      },
      dialogVisible: false, //添加弹框
      tableData: [],
      mark: false,
      id: "",
      loading: true,
      Host: api.host
    };
  },
  created() {
    this.host = api.files;
    this.getlist();
  },
  methods: {
    //手持身份证
    cardHoldSuccess(res, file) {
      this.cardHoldUrl = res.data.filePaht.substring(
        2,
        res.data.filePaht.length
      );
      this.cardHold =
        this.Host + res.data.filePaht.substring(2, res.data.filePaht.length);
      // this.cardHold = URL.createObjectURL(file.raw);
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.loading = false;
    },
    //身份证正面
    cardPosSuccess(res, file) {
      this.cardPosUrl = res.data.filePaht.substring(
        2,
        res.data.filePaht.length
      );
      this.cardPos =
        this.Host + res.data.filePaht.substring(2, res.data.filePaht.length);
      // this.cardPos = URL.createObjectURL(file.raw);
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.loading = false;
    },
    //身份证背面
    cardBackSuccess(res, file) {
      this.cardBackUrl = res.data.filePaht.substring(
        2,
        res.data.filePaht.length
      );
      this.cardBack =
        this.Host + res.data.filePaht.substring(2, res.data.filePaht.length);
      // this.cardBack = URL.createObjectURL(file.raw);
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.loading = false;
    },
    //上传失败
    onError() {
      this.loading = false;
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      this.loading = true
      const isJPG = file.type === "image/jpeg" || file.type ==="image/png" || file.type ==="image/jpg" || file.type ==="image/bmp";
//    const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        this.loading = false;
//      return false;
      }
//    if (!isLt2M) {
//      
//    }
      return isJPG;
    },

    excel() {
      this.$axios
        .post(api.getlist, {
          Para: this.input,
          PageSize: 10,
          PageIndex: this.index - 1,
          OrderbyString: "CNName",
          ToExcel: true
        })
        .then(res => {
          if (res.data.isOK) {
            if (res.data.data.ExcelResult && res.data.data.ExcelResult.isOK) {
              this.loading = false;
              var urls = res.data.data.ExcelResult.data.filePath;
              window.location.href = api.host + "/template/" + urls;
            } else {
              this.loading = false;
              this.$message.error(res.data.data.ExcelResult.msg);
            }
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          }
        });
    },
    //查找
    searcj() {
      this.index = 1;
      this.getlist();
    },
    //翻页
    handleCurrentChange(val) {
      this.index = val;
      this.loading = true;
      this.$axios
        .post(api.getlist, {
          Para: this.input,
          PageSize: 10,
          PageIndex: this.index - 1,
          OrderbyString: "CNName",
          ToExcel: false
        })
        .then(res => {
          if (res.data.isOK) {
            this.loading = false;
            this.tableData = res.data.data.Data;
            this.total = res.data.data.Items ? res.data.data.Items : 1;
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          }
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClose() {
      this.mark = false;
      this.dialogVisible = false;
    },
    //获取列表
    getlist() {
      this.$axios
        .post(api.getlist, {
          Para: this.input,
          PageSize: 10,
          PageIndex: this.index - 1,
          OrderbyString: "CNName",
          ToExcel: false
        })
        .then(res => {
          if (res.data.isOK) {
            this.loading = false;
            this.tableData = res.data.data.Data;
            this.total = res.data.data.Items ? res.data.data.Items : 1;
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          }
        });
    },
    //添加用户
    addUser() {
      this.formLabelAlign.money = "";
      this.formLabelAlign.name = "";
      this.formLabelAlign.sex = "男";
      this.formLabelAlign.card = "";
      this.formLabelAlign.tel = "";
      this.formLabelAlign.age = "";
      this.formLabelAlign.years = "";
      this.formLabelAlign.add = "";
      this.formLabelAlign.qq = "";
      this.formLabelAlign.wx = "";
      this.formLabelAlign.city = "";
      this.dialogVisible = true;
      this.cardHoldUrl = "";
      this.cardPosUrl = "";
      this.cardBackUrl = "";
      this.formLabelAlign.jj11 = "";
      this.formLabelAlign.jj21 = "";
      this.formLabelAlign.bz1 = "";
      this.formLabelAlign.jj1 = "";
      this.formLabelAlign.jj2 = "";
      this.formLabelAlign.bz = "";
    },
    //确认添加用户
    newUse() {
      var reg = /^[\u4E00-\u9FA5]{2,4}$/; //只能是汉字并且在2-4位之间
      //名字不能为空
      if (!reg.test(this.formLabelAlign.name)) {
        this.$message.error("姓名不符合标准");
        return false;
      }
      if (!reg.test(formLabelAlign.jj1)) {
        this.$message.error("姓名不符合标准");
        return false;
      }
      if (!reg.test(formLabelAlign.jj11)) {
        this.$message.error("姓名不符合标准");
        return false;
      }
      //身份证号码18位
      var cards = /^[1-9]\d{7}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; //身份证验证
      if (cards.test(this.formLabelAlign.card) === false) {
        this.$message.error("身份证号码 不合法");
        return false;
      }
      //手机号验证
      var _phones = /^[1][3,4,5,7,8][0-9]{9}$/; //手机号验证
      if (_phones.test(this.formLabelAlign.tel) === false) {
        this.$message.error("请输入正确的手机号");
        return false;
      }
      //居住地验证
      if (
        this.formLabelAlign.add.indexOf("新疆") != -1 ||
        this.formLabelAlign.add.indexOf("西藏") != -1 ||
        this.formLabelAlign.add.indexOf("内蒙") != -1
      ) {
        this.$message.error("该地区还没开通服务");
        return false;
      }
      this.loading = true;
      this.$axios
        .post(api.backadd, {
          DMoney: this.formLabelAlign.money,
          IP: "",
          POPPara: "",
          CNName: this.formLabelAlign.name,
          Gender: this.formLabelAlign.sex,
          CardID: this.formLabelAlign.card,
          Tel: this.formLabelAlign.tel,
          Age: this.formLabelAlign.age,
          TelYears: this.formLabelAlign.years,
          City: "",
          Address: this.formLabelAlign.add,
          QQ: this.formLabelAlign.qq,
          WX: this.formLabelAlign.wx,
          ZMScore: this.formLabelAlign.zmf,
          EmergencyName: this.formLabelAlign.jj1,
          EmergencyRelation: this.formLabelAlign.jj2,
          EmergencyPhone: this.formLabelAlign.bz,
          IDcardZ: this.cardHoldUrl,
          IDcardF: this.cardPosUrl,
          IDcardS: this.cardBackUrl,
          EmergencyName: this.formLabelAlign.jj11,
          EmergencyRelation: this.formLabelAlign.jj21,
          EmergencyPhone: this.formLabelAlign.bz1
        })
        .then(res => {
          if (res.data.isOK) {
            this.loading = false;
            this.dialogVisible = false;
            this.getlist();
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          }
        });
    },
    //删除用户
    del(id) {
      this.loading = true;
      this.$axios.get(api.delmember + "/" + id).then(res => {
        if (res.data.isOK) {
          this.loading = false;
          this.getlist();
        } else {
          if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
            this.$router.push({
              path: "/admin"
            });
          } else {
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        }
      });
    },
    //修改用户
    modiy(id) {
      this.id = id;
      this.getmodel(this.id);
      this.mark = true;
    },
    Close() {
      this.mark = false;
    },
    //获取模型
    getmodel(id) {
      this.$axios.get(api.gettest + "/" + id).then(res => {
        if (res.data.isOK) {
          this.id = res.data.data.ID;
          //				this.
          this.formLabelAlign.add = res.data.data.Address;
          this.formLabelAlign.name = res.data.data.CNName;
          this.formLabelAlign.age = res.data.data.Age;
          this.formLabelAlign.card = res.data.data.CardID;
          this.formLabelAlign.zmf = res.data.data.ZMScore;
          this.formLabelAlign.sex = res.data.data.Gender;
          this.formLabelAlign.qq = res.data.data.QQ;
          this.formLabelAlign.tel = res.data.data.Tel;
          this.formLabelAlign.years = res.data.data.TelYears;
          this.formLabelAlign.wx = res.data.data.WX;
          this.zmzSfz = res.data.data.IDcardZ; //正面照
          this.fmzSfz = res.data.data.IDcardF; //反面照
          this.sczSfz = res.data.data.IDcardS; //手持照
          this.formLabelAlign.jj11 = res.data.data.EmergencyName1; //紧急一
          this.formLabelAlign.jj21 = res.data.data.EmergencyRelation1; //紧急一
          this.formLabelAlign.bz1 = res.data.data.EmergencyPhone1; //紧急一
          this.formLabelAlign.jj1 = res.data.data.EmergencyName; //紧急
          this.formLabelAlign.jj2 = res.data.data.EmergencyRelation; //紧急
          this.formLabelAlign.bz = res.data.data.EmergencyPhone; //紧急
        } else {
          if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
            this.$router.push({
              path: "/admin"
            });
          } else {
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        }
      });
    },
    //修改用户
    edit() {
      this.loading = true;
      this.$axios
        .post(api.editmember, {
          ID: this.id,
          IP: "",
          POPPara: "",
          CNName: this.formLabelAlign.name,
          Gender: this.formLabelAlign.sex,
          CardID: this.formLabelAlign.card,
          Tel: this.formLabelAlign.tel,
          Age: this.formLabelAlign.age,
          TelYears: this.formLabelAlign.years,
          City: "",
          Address: this.formLabelAlign.add,
          QQ: this.formLabelAlign.qq,
          WX: this.formLabelAlign.wx,
          ZMScore: this.formLabelAlign.zmf
        })
        .then(res => {
          if (res.data.isOK) {
            this.loading = false;
            this.mark = false;
            this.getlist();
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          }
        });
    }
  }
};
</script>

<style>
.bannerimg3 {
  display: block;
  width: 80px;
  margin: auto;
  margin-top: 20px;
}
.divleft {
  width: 320px;
  float: left;
}
.divleft img {
  height: 200px;
  width: 320px;
  border: 1px solid #337ab7;
}
.divrig {
  float: left;
  margin-left: 20px;
}
.thumbnail {
  height: 200px;
}
.divrig .el-form-item {
  margin-bottom: 10px;
}
.sfz-box {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}
.sfz-box img {
  width: 320px;
  height: 200px;
  display: block;
  float: left;
  border: 1px solid #337ab7;
}
.sfz-box img:nth-of-type(1) {
  margin-right: 20px;
}
.member_box .el-dialog__body {
  padding-bottom: 10px;
}
</style>